<!Doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>仿百度新首页</title>
	<link rel="stylesheet" href="css/common.css"/>
</head>
<body>
	<div id="wrapper">
		<div class="skinBg" style="background-image: url('images/65.jpg');"></div>
		<header id="header">
			<div class="weather fl">
				<span class="cityW">
					<span>苏州：</span>
					<span>
						<span class="weatherIcon wI1"></span>
						<span>35 ~ 24℃</span>
					</span>
				</span>
				<span class="sp">|</span>
				<span class="pollution">
					<span>空气质量：83</span>
					<span class="polutionLevel">良</span>
				</span>
				<div class="cityWeather">
					
				</div>
			</div>
			<nav class="headNavs fr tr">
				<a href="#"><span class="s-icon s-icon-treasure"></span><span>宝箱</span></a>
				<a href="#"><span class="s-icon s-icon-skin"></span><span>换肤</span></a>
				<a href="#"><span class="s-icon s-icon-msg"></span><span>消息</span></a>
				<a><span class="s-icon s-icon-line"></span></a>
				<a href="#"><span>设为首页</span></a>
				<a href="javascript:;" class="uname"><span>审美网</span><span class="user-arrow"></span></a>
				<div class="topMenus dn">
					<span class="arrowTop"></span>
					<a href="#">个人中心</a>
					<a href="#">帐号设置</a>
					<a href="#">搜索设置</a>
					<a href="#">意见反馈</a>
					<a href="#">首页教程</a>
					<a href="#">安全退出</a>
				</div>
			</nav>
		</header>
		<div class="content tc">
			<p class="logo"><img width="270" height="129" src="images/logo_white.png" alt="logo" /></p>
			<nav class="mainNavs">
				<a href="#">新闻</a>
				<a href="#">网页</a>
				<a href="#">贴吧</a>
				<a href="#">知道</a>
				<a href="#">音乐</a>
				<a href="#">图片</a>
				<a href="#">视频</a>
				<a href="#">地图</a>
				<a href="#">百科</a>
				<a href="#">文库</a>
				<a href="#">更多&gt;&gt;</a>
			</nav>
			<div class="searchBox">
				<form action="">
					<input type="text" class="searchIpt f14" name="wd" maxlength="100" autocomplete="off"/>
					<input type="submit" class="btn cp" value="百度一下" />
				</form>
			</div>
			<div class="mainContents oh">
				<div class="menusWrapper fl">
					<a class="active" href="javascript:;">导航</a>
					<a href="javascript:;">新闻</a>
					<a href="javascript:;">世界杯</a>
					<a href="javascript:;">音乐</a>
					<a href="javascript:;">团购</a>
				</div>
				<div class="ctnerWrapper">
					<div class="ctnerBox">
						<div id="cbox-1" class="cbox tl dn">
							<div class="ctnerTab pr tc">
								<a href="#">我的导航</a> <a href="#" class="on">推荐导航</a>
							</div>
							<div class="myNavs rtNavs dn pt15">
								<div class="navTitle fl">我的导航</div>
								<div class="navArea oh">
									<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/101.png" alt="" /></a>
								</div>
							</div>
							<div class="hotNavs rtNavs dn oh pt15">
								<div class="navTitle fl">热门网址</div>
								<div class="navArea oh">
									<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/101.png" alt="" /></a>
									<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/102.png" alt="" /></a>
									<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/103.png" alt="" /></a>
									<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/104.png" alt="" /></a>
									<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/20.png" alt="" /></a>
									<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/106.png" alt="" /></a>
									<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/107.png" alt="" /></a>
									<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/108.png" alt="" /></a>
									<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/109.png" alt="" /></a>
									<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/110.png" alt="" /></a>
									<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/111.png" alt="" /></a>
									<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/112.png" alt="" /></a>
									<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/113.png" alt="" /></a>
									<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/114.png" alt="" /></a>
									<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/115.png" alt="" /></a>
									<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/116.png" alt="" /></a>
									<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/12.png" alt="" /></a>
									<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/117.png" alt="" /></a>
								</div>
							</div>
						</div>
						<div id="cbox-2" class="cbox tl dn">
							<div class="newsBox oh">
								<div class="sliderBox fl">
									<div class="slider">
										<a href="#" target="_blank" class="picLink active">
											<img width="425" height="260" src="images/news1.jpg" alt="" />
											<span href="#" target="_blank" class="picTitle">哈尔滨江边出现涉黄服务"老头乐"</span>
										</a>
										<a href="#" target="_blank" class="picLink">
											<img width="425" height="260" src="images/news2.jpg" alt="" />
											<span href="#" target="_blank" class="picTitle">新闻标题2</span>
										</a>
										<a href="#" target="_blank" class="picLink">
											<img width="425" height="260" src="images/news3.jpg" alt="" />
											<span href="#" target="_blank" class="picTitle">新闻标题3</span>
										</a>
										<a href="#" target="_blank" class="picLink">
											<img width="425" height="260" src="images/news4.jpg" alt="" />
											<span href="#" target="_blank" class="picTitle">新闻标题4</span>
										</a>
										<a href="#" target="_blank" class="picLink">
											<img width="425" height="260" src="images/news5.jpg" alt="" />
											<span href="#" target="_blank" class="picTitle">新闻标题5</span>
										</a>
									</div>
									<div class="smallPics">
										<a class="active"><img width="68" height="40" src="images/news1.jpg" alt="" /></a>
										<a><img width="68" height="40" src="images/news2.jpg" alt="" /></a>
										<a><img width="68" height="40" src="images/news3.jpg" alt="" /></a>
										<a><img width="68" height="40" src="images/news4.jpg" alt="" /></a>
										<a><img width="68" height="40" src="images/news5.jpg" alt="" /></a>
									</div>
								</div>
								<div class="topic">
									<div class="topicTop">
										<span class="titleWords titleT on"><a href="javascript:;">搜索风云榜</a></span>
										<span class="titleTopic titleT"><a href="javascript:;">热门话题</a></span>
										<a class="changeWords" href="javascript:;">换一换</a>
									</div>
									<div class="topicList">
										<div class="wBox topicB dn">
											<ul>
												<li><a target="_blank" href="#">男子入教当卧底救妻</a></li>
												<li><a target="_blank" href="#">广西无人海岛售14...</a></li>
												<li><a target="_blank" href="#">北京大雨</a></li>
												<li><a target="_blank" href="#">世界杯星太太团</a></li>
												<li><a target="_blank" href="#">13岁印度女孩登顶珠...</a></li>
												<li><a target="_blank" href="#">dnf职业联赛半决赛</a></li>
												<li><a target="_blank" href="#">疑似mh370坠毁噪音</a></li>
												<li><a target="_blank" href="#">李保田儿子</a></li>
												<li><a target="_blank" href="#">6城试点共有产权房</a></li>
												<li><a target="_blank" href="#">陕西推土机毁燕子窝</a></li>
												<li><a target="_blank" href="#">老师住深山出高考题</a></li>
												<li><a target="_blank" href="#">越方冲撞中方船只1200次</a></li>
												<li><a target="_blank" href="#">星空日记</a></li>
												<li><a target="_blank" href="#">肉饼店老板因相貌引围观...</a></li>
												<li><a target="_blank" href="#">高圆圆结婚</a></li>
												<li><a target="_blank" href="#">诺曼底登陆</a></li>
											</ul>
										</div>
										<div class="tBox topicB dn">
											<ul>
												<li><a target="_blank" href="#">话题11111</a></li>
												<li><a target="_blank" href="#">话题22222</a></li>
												<li><a target="_blank" href="#">话题33333</a></li>
												<li><a target="_blank" href="#">话题44444</a></li>
												<li><a target="_blank" href="#">话题55555</a></li>
												<li><a target="_blank" href="#">话题66666</a></li>
												<li><a target="_blank" href="#">话题77777</a></li>
												<li><a target="_blank" href="#">话题88888</a></li>
												<li><a target="_blank" href="#">话题99999</a></li>
												<li><a target="_blank" href="#">话题11111</a></li>
												<li><a target="_blank" href="#">话题22222</a></li>
												<li><a target="_blank" href="#">话题33333</a></li>
												<li><a target="_blank" href="#">话题44444</a></li>
												<li><a target="_blank" href="#">话题55555</a></li>
												<li><a target="_blank" href="#">话题66666</a></li>
												<li><a target="_blank" href="#">话题77777</a></li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div id="cbox-3" class="cbox tl dn">
							<p class="pt15 tc f14">4，其他这几个 这里就忽略掉了！意思意思算了...</p>
						</div>
						<div id="cbox-4" class="cbox tl dn">
							<p class="pt15 tc f14">5，其他这几个这里就忽略掉了！意思意思算了...</p>
						</div>
						<div id="cbox-5" class="cbox tl dn">
							<p class="pt15 tc f14">6，其他这几个这里就忽略掉了！意思意思算了...</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footer id="footer" class="tc">©2014 Baidu 使用百度前必读 京ICP证030173号</footer>
	</div>
</body>
</html>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.autocomplete.min.js"></script>
<script>
	$('.uname,.topMenus').hover(function(){
		$('.topMenus').stop(true,true).fadeIn(200);
	},function(){
		$('.topMenus').stop(true,true).delay(500).fadeOut(200);
	});

	//搜索框自动补全; 文档地址：http://autocomplete.jiani.info/doc/
	$('.searchIpt').AutoComplete({
		'data': ['About Me', '审美网', 'abcdefg', 'One', 'Two', 'Three', 'Four', 'Five', 'Six','smwell.com', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve'],
		'itemHeight': 24,
		'width': 529
	}).AutoComplete('show');

	$('.ctnerTab a').click(function(){
		if(!$(this).hasClass('on')){
			$('.ctnerTab a').removeClass('on').eq($(this).index()).addClass('on');
			$('.rtNavs').stop(true,true).hide(200).eq($(this).index()).show(300);
		}
	});

	$('.menusWrapper a').click(function(){
		if(!$(this).hasClass('active')){
			$('.menusWrapper a').removeClass('active').eq($(this).index()).addClass('active');
			$('.cbox').stop(true,true).animate({top:318},100).hide().eq($(this).index()).animate({top:0},400).show();
		}
	});

	$('.smallPics a').click(function(){
		if(!$(this).hasClass('active')){
			$('.smallPics a').removeClass('active').eq($(this).index()).addClass('active');
			$('.picLink').stop(true,true).removeClass('active').eq($(this).index()).addClass('active');
		}
	});

	$('.titleT').hover(function(){
		if(!$(this).hasClass('on')){
			$('.titleT').removeClass('on').eq($(this).index()).addClass('on');
			$('.topicB').stop(true,true).hide().eq($(this).index()).show();
		}
	});
</script>